<template>
  <div class="jbxx">
    <div class="title">
      <div class="left">
        <!-- <el-icon style="margin-right: 4px">
          <LocationInformation />
        </el-icon>
        <span>位置查看</span> -->
        <div class="tag">
          <el-tag v-if="title == '户籍人口' || title == '党员'" effect="dark" type="success">{{ title }}</el-tag>
          <el-tag
            v-else-if="title == '脱贫不稳定户' || title == '脱贫户' || title == '边缘易致贫户' || title == '突发严重困难户'"
            effect="dark"
            type="danger"
          >
            {{ title }}
          </el-tag>
          <el-tag v-else-if="title == '低保户' || title == '高龄老人'" effect="dark" type="warning">{{ title }}</el-tag>
          <el-tag v-else-if="title == '残疾人' || title == '公益岗'" effect="dark" type="primary">{{ title }}</el-tag>
          <el-tag v-else effect="dark" type="info">{{ title }}</el-tag>
        </div>
      </div>
      <el-icon class="icon" @click="close">
        <CloseBold />
      </el-icon>
    </div>
    <div class="content">
      <el-table class="zylbTable" :row-class-name="tableRowClassName" :highlight-current-row="false" :data="tableData" style="width: 100%">
        <el-table-column
          v-for="item in list"
          :key="item.title"
          :width="item.width ? item.width : ''"
          :prop="item.value"
          :label="item.title"
          show-overflow-tooltip
        />
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
const emit = defineEmits(['closePanel']);
import szxcdialog from '@/api/szxcapi/szxcdialog.json';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const $szxcapi = (proxy as any)?.$szxcapi;
import useMapStore from '@/store/modules/map';
const country = ref(useMapStore().countryText);
const title = ref('');
const list = ref([]);
const props = defineProps({
  row: {
    type: Object,
    default: () => {}
  },
  rylb: {
    type: String,
    default: '户籍人口'
  }
});
const dataOss = reactive<any>({
  // 查询参数
  queryParams: {
    pageNum: 1,
    pageSize: 5
  }
});
const { queryParams } = toRefs(dataOss);
const close = () => {
  emit('closePanel');
};
const handleQuery = () => {};

const tableRowClassName = ({ row, rowIndex }: { row; rowIndex: number }) => {
  if (rowIndex == 0) {
    return 'zero-row';
  } else {
    if (rowIndex % 2 == 0) {
      return 'js-row';
    } else {
      return 'sz-row';
    }
  }
};
const tableData = ref([]);
const init = async () => {
  title.value = props.rylb;
  const params = {
    'ssc': country.value,
    'rylb': props.rylb,
    'sfzh': props.row.sfzh
  };
  const data = await $szxcapi.ryxqQuery(params);
  tableData.value = data.data;
  // queryParams.value.total = data.total;
};
// onMounted(async () => {
//   await nextTick();
//   init();
// });
// watch(
//   () => useMapStore().country,
//   (value) => {
//     country.value = value;
//     init();
//   }
// );
watch(
  () => props.row,
  (value) => {
    if (props.rylb == '党员') {
      list.value = szxcdialog.dy;
    } else if (props.rylb == '户籍人口') {
      list.value = szxcdialog.hjrk;
    } else if (props.rylb == '低保户') {
      list.value = szxcdialog.db;
    } else if (props.rylb == '公益岗') {
      list.value = szxcdialog.gy;
    } else if (props.rylb == '高龄老人') {
      list.value = szxcdialog.gllr;
    } else if (props.rylb == '残疾人') {
      list.value = szxcdialog.cjr;
    } else if (props.rylb == '雨露计划') {
      list.value = szxcdialog.yljh;
    } else if (props.rylb == '重要精神病患者') {
      list.value = szxcdialog.zyjsb;
    } else {
      list.value = szxcdialog.pk;
    }
    init();
  },
  {
    deep: true
  }
);
</script>
<style lang="scss" scoped>
.title {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 9px 15px;
  background: rgb(21, 82, 134);
  height: 44px;
  justify-content: space-between;
  // text-shadow: 0px 0px 9px #fff;
  border-bottom: 1px solid #ffffff99;
  .left {
    display: flex;
    align-items: center;
  }
  .icon {
    cursor: pointer;
  }
  .tag {
    margin-left: 8px;
    .el-tag {
      margin: 0px 4px;
    }
  }
}
.content {
  height: calc(250px - 50px);
  overflow: hidden auto;
}
.el-pagination {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

:deep(.el-progress-bar__inner) {
  background-color: unset;
  background-image: linear-gradient(88deg, #47e7ff 0%, #1e86df 100%);
}
.el-progress {
  width: 100px;
  margin-left: 20px;
}
.zylbTable,
::v-deep.el-table {
  background-color: transparent;
  thead,
  tr,
  th.el-table__cell {
    font-size: 16px;
    text-align: center;
    color: #fff;
    padding: 0;
    height: 30px;
    background-color: #178af01a !important;
    border: 0px;
    // .cell {
    //   background: linear-gradient(0deg, #4ab1ff 0%, #ffffff 100%);
    //   -webkit-background-clip: text;
    //   -webkit-text-fill-color: transparent;
    // }
  }

  // thead {
  // th.el-table__cell {
  //   color: #cae9ff;
  //   font-size: 18px;
  //   background: linear-gradient(0deg, rgba(56, 140, 199, 0.9) 0%, transparent 100%);
  // }
  // }

  .el-table__body {
    .el-table__cell {
      cursor: pointer !important;
      text-align: center;
      padding: 0;
      border-bottom: 1px solid rgba(188, 227, 255, 0.49);
      border-image: linear-gradient(transparent, rgba(188, 227, 255, 0.9), transparent) 5 5;
    }
  }

  .el-table__body tr:hover > td.el-table__cell {
    background-color: transparent !important;
  }

  .el-table__inner-wrapper:before {
    background-color: transparent !important;
  }
  // tr.zero-row {
  //   border-bottom: 1px solid rgba(188, 227, 255, 0.49);
  //   td .cell {
  //     background: linear-gradient(0deg, #e5bcf3 0%, #ffffff 74.4873046875%);
  //     -webkit-background-clip: text;
  //     -webkit-text-fill-color: transparent;
  //   }
  // }
  // tr.sz-row {
  //   td .cell {
  //     background: linear-gradient(0deg, #b8efac 0.5126953125%, #ffffff 100%);
  //     -webkit-background-clip: text;
  //     -webkit-text-fill-color: transparent;
  //   }
  // }
  // tr.js-row {
  //   td .cell {
  //     background: linear-gradient(0deg, #f8bebe 0.5126953125%, #ffffff 100%);
  //     -webkit-background-clip: text;
  //     -webkit-text-fill-color: transparent;
  //   }
  // }
}
</style>
